// 1.1 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 1.2 配置选项
let options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: ".preview",
};

// 1.3 创建裁剪区域
$image.cropper(options);

// 绑定点击事件 (点击button按钮的时候，触发点击了文件选择框)
$("#btnChooseImage").click(function () {
    $("#file").click()
})

// 更换剪裁区的图片
// 当文件域的内容改变的时候，更换图片
$('#file').change(function () {
    // 获取用户选择的图片（文件对象）
    let fileObj = this.files[0]; // 我们选择的图片的文件对象

    if (!fileObj) {
        // 当fileObj不存在 ==> 用户点击了取消，fileObj就是undefined
        return
    }

    // 根据文件对象，生成一个临时的url，用于访问被选择的图片
    let url = URL.createObjectURL(fileObj);

    // 更换剪裁区的图片的src属性
    $image
        .cropper('destroy') // - 销毁原理的剪裁区
        .attr('src', url) // - 更换图片
        .cropper(options); // - 重新创建剪裁区
});

let layer = layui.layer;

$('#btnCreateAvatar').on('click', function () {
    // 剪裁得到一张图片（canvas图片）
    let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
    });

    // 把图片转成base64格式
    let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串

    // axios 发送请求 
    // encodeURIComponent是强化版的，可以解析特殊符号
    // 而encodeURI不能解析特殊符号 也就是中间掺杂着应该"="号 无法解析
    axios.post('/my/update/avatar' , `avatar=${encodeURIComponent(dataURL)}`).then(({data: {status, message}}) => {
        // console.log(res);
        if(status !== 0) {
            // 更新头像失败
            return layer.msg(message)
        }
        // 更新头像成功
        layer.msg(message)

        // 调用父页面index页面的getUserInfo函数 ==> 重新渲染展示头像
        window.parent.getUserInfo();
    })
})